<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <!--轮播图css样式插件-->
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
    <!--公共样式文件-->
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <!--当前html文件的样式-->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    
</head>

<body>
    <!--头部-->
    <div class="header core clearfix">
        <div class="header-content">
            <!--logo-->
            <h1>
                <a href="#"><img src="img/images/logo_03.png" /></a>
            </h1>
        </div>
        <div class="header-content-ul clearfix">
            <ul>
                <li>
                    <a href="#">小米手机</a>
                </li>
                <li>
                    <a href="#">Redmi红米</a>
                </li>
                <li>
                    <a href="#">电视</a>
                </li>
                <li>
                    <a href="#">笔记本</a>
                </li>
                <li>
                    <a href="#">家电</a>
                </li>
                <li>
                    <a href="#">路由器</a>
                </li>
                <li>
                    <a href="#">智能硬件</a>
                </li>
                <li>
                    <a href="#">服务</a>
                </li>
                <li>
                    <a href="#">社区</a>
                </li>
            </ul>
        </div>

        <form action="" method="post" class="clearfix">
            <input type="text" value="" />
            <button><span class="iconfont">&#xe634;</span></button>
        </form>
    </div>
    <!--内容-->
    <div class="main">
        <div class="main-banner swiper-container core" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/056576955e6b8a936bbea4e3fc728a4b.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="img/a38b1d56409913d5dc869023ade36d94.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="img/056576955e6b8a936bbea4e3fc728a4b.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="img/73706f3434e5f51ffce4b59978b8ddbc.jpg" />
                </div>
            </div>
        </div>
        <div class="main-shipin">
            <div class="main-shipin-content core clearfix">
                <h2>视频</h2>
                <div class="main-shipin-tupian">
                    <img src="img/b4004fc968de331f702585d58b15aba2.jpg" />
                    <p>小米MIX AIpha 开箱视频</p>
                </div>
                <div class="main-shipin-tupian">
                    <img src="img/b4004fc968de331f702585d58b15aba2.jpg" />
                    <p>小米MIX AIpha 开箱视频</p>
                </div>
                <div class="main-shipin-tupian">
                    <img src="img/b4004fc968de331f702585d58b15aba2.jpg" />
                    <p>小米MIX AIpha 开箱视频</p>
                </div>
                <div class="main-shipin-tupian">
                    <img src="img/b4004fc968de331f702585d58b15aba2.jpg" />
                    <p>小米MIX AIpha 开箱视频</p>
                </div>
            </div>
        </div>
    </div>
    <!--尾部-->
    <div class="footer core clearfix">
        <div class="footer-content clearfix">
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">订单操作</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-content-2">
            <h3>400-100-5678</h3>
            <p>周一至周日8:00-18:00</p>
            <p>（仅收市话费）</p>
        </div>
    </div>
    <div class="guding">
        <dl>
            <dt><img src="img/98a23aae70f25798192693f21c4d4039.png" alt="" /></dt>
            <dd>手机APP</dd>
        </dl>
        <dl>
            <dt><img src="img/55cad219421bee03a801775e7309b920.png" alt="" /></dt>
            <dd>个人服务</dd>
        </dl>
        <dl>
            <dt><img src="img/12eb0965ab33dc8e05870911b90f3f13.png" alt="" /></dt>
            <dd>售后中心</dd>
        </dl>
    </div>
</body>

</html>
<!--轮播图js插件-->
<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    new Swiper("#banner", {
        autoplay: 2000,
        effect: "cube",
    });
</script>